﻿@{
    ViewBag.Title = "Phân công giảng viên, phương tiện, học viên theo từng khóa học";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@*<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">*@

<link href="~/Content/w3.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>




<style>
    div#tree ul li {
        margin-left: 25px;
        position: relative;
        padding-left: 5px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

        div#tree ul li::before {
            content: " ";
            position: absolute;
            width: 1px;
            background-color: #ccc;
            top: 5px;
            bottom: -12px;
            left: -10px;
        }



        div#tree ul li:last-child::before {
            display: none;
        }

        div#tree ul li::after {
            content: " ";
            position: absolute;
            left: -10px;
            width: 10px;
            height: 1px;
            background-color: #ccc;
            top: 12px;
        }


    /*Menu*/
    .menuphuongtien {
        position: absolute;
        z-index: 999999;
        display: none;
        border: 1px solid black;
        border-radius: 3px;
        width: 200px;
        background: #000;
        box-shadow: 10px 10px 5px #888888;
    }

        .menuphuongtien ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            .menuphuongtien ul a {
                text-decoration: none;
            }

            .menuphuongtien ul li {
                padding: 5px 2px;
                margin-bottom: 3px;
                color: white;
                font-weight: bold;
                background-color: darkturquoise;
            }

                .menuphuongtien ul li:hover {
                    cursor: pointer;
                    background-color: #7fffd4;
                }

    /*menugiangvien*/
    .menugiangvien {
        position: absolute;
        z-index: 999999;
        display: none;
        border: 1px solid black;
        border-radius: 3px;
        width: 200px;
        background: #000;
        box-shadow: 10px 10px 5px #888888;
    }

        .menugiangvien ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            .menugiangvien ul a {
                text-decoration: none;
            }

            .menugiangvien ul li {
                padding: 5px 2px;
                margin-bottom: 3px;
                color: white;
                font-weight: bold;
                background-color: darkturquoise;
            }

                .menugiangvien ul li:hover {
                    cursor: pointer;
                    background-color: #7fffd4;
                }


    /* Colors */
    .Gainsboro, .Orange, .Plum {
        width: 15px;
        height: 15px;
        border: 0px solid black;
        display: inline-block;
        margin-right: 5px;
    }

    .Gainsboro {
        background-color: Gainsboro;
    }

    .Orange {
        background-color: red;
    }

    .Plum {
        background-color: Plum;
    }
</style>

<style type="text/css">
    .footer-distributed {
        position: inherit;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $(".classphuongtien").on("contextmenu", function (e) {
            //prevent default context menu for right click
            e.preventDefault();

            var menu = $(".menuphuongtien");

            //hide menu if already shown
            menu.hide();

            //get x and y values of the click event
            var pageX = e.pageX;
            var pageY = e.pageY;

            //position menu div near mouse cliked area
            menu.css({ top: pageY, left: pageX });

            var mwidth = menu.width();
            var mheight = menu.height();
            var screenWidth = $(window).width();
            var screenHeight = $(window).height();

            //if window is scrolled
            var scrTop = $(window).scrollTop();

            //if the menu is close to right edge of the window
            if (pageX + mwidth > screenWidth) {
                menu.css({ left: pageX - mwidth });
            }

            //if the menu is close to bottom edge of the window
            if (pageY + mheight > screenHeight + scrTop) {
                menu.css({ top: pageY - mheight });
            }

            //finally show the menu
            menu.show();
        });

        $(".classphuongtien").on("click", function () {
            $(".menuphuongtien").hide();
        });
        $(".classphuongtien").on("blur", function () {
            $(".menuphuongtien").hide();
        });


        //giảng viên:

        $(".classgiangvien").on("contextmenu", function (e) {
            //prevent default context menu for right click
            e.preventDefault();

            var menu = $(".menugiangvien");

            //hide menu if already shown
            menu.hide();

            //get x and y values of the click event
            var pageX = e.pageX;
            var pageY = e.pageY;

            //position menu div near mouse cliked area
            menu.css({ top: pageY, left: pageX });

            var mwidth = menu.width();
            var mheight = menu.height();
            var screenWidth = $(window).width();
            var screenHeight = $(window).height();

            //if window is scrolled
            var scrTop = $(window).scrollTop();

            //if the menu is close to right edge of the window
            if (pageX + mwidth > screenWidth) {
                menu.css({ left: pageX - mwidth });
            }

            //if the menu is close to bottom edge of the window
            if (pageY + mheight > screenHeight + scrTop) {
                menu.css({ top: pageY - mheight });
            }

            //finally show the menu
            menu.show();
        });

        $(".classgiangvien").on("click", function () {
            $(".menugiangvien").hide();
        });
        $(".classgiangvien").on("blur", function () {
            $(".menugiangvien").hide();
        });


    });
</script>

<div class="menuphuongtien">
    <ul>
        <li><span class='Gainsboro'></span>&nbsp;<span>Thêm giảng viên </span></li>
        <li><span class='Orange'></span>&nbsp;<span>Xóa phương tiện</span></li>
        @*<li><span class='Plum'></span>&nbsp;<span>Plum</span></li>*@
    </ul>
</div>

<div class="menugiangvien">
    <ul>
        <li><span class='Gainsboro'></span>&nbsp;<span>Thêm học viên </span></li>
        <li><span class='Orange'></span>&nbsp;<span>Xóa giảng viên</span></li>

    </ul>
</div>


@using (Html.BeginForm("Create", "GPS_PhanCongLichHoc", FormMethod.Post, new { @id = "myForm" }))
{
    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true)

    <br />
    <br />
    <h3 class="text-center fdb-title-search-form">Phân công giảng viên, phương tiện, học viên theo từng khóa học</h3>

    <div class="container">


        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Giảng viên khóa học</a></li>
            <li><a data-toggle="tab" href="#menu1">Phương tiện khóa học</a></li>
            <li><a data-toggle="tab" href="#menu2">Phương tiện giảng viên</a></li>
            <li><a data-toggle="tab" href="#menu3">Phương tiện học viên</a></li>
        </ul>

        <div class="tab-content" style="z-index:1000">
            <div id="home" class="tab-pane fade in active">
                <h3>Giảng viên khóa học</h3>

                <div id="tabs-1">
                    @Html.Hidden("IsEdit", 0)
                    <div id="tree">
                        <ul style="list-style:none" id="nav">
                            <li class="clickable">
                                <button type="button" class="btn btn-primary btn-sm classphuongtien">1. Phương tiện 1</button>
                                <ul style="list-style:none" class="sf-menu-sub">
                                    <li>
                                        <button type="button" class="btn btn-success btn-sm classgiangvien">1. Trịnh Đức Giang</button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-success btn-sm classgiangvien">2. Trần Thị Loan</button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-success btn-sm classgiangvien">3. Nguyễn Anh Tuấn</button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-success btn-sm classgiangvien">4. Nguyễn Thị Ngọc</button>
                                    </li>
                                </ul>


                            </li>
                            <li class="clickable">
                                <a href="#">Phương tiện 2</a>
                                <ul style="list-style:none" class="sf-menu-sub">
                                    <li>
                                        <a href="#">Giảng viên 1</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 2</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 3</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 4</a>
                                    </li>
                                </ul>

                            </li>
                            <li class="clickable">
                                <a href="#">Phương tiện 3</a>
                                <ul style="list-style:none" class="sf-menu-sub">
                                    <li>
                                        <a href="#">Giảng viên 1</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 2</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 3</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 4</a>
                                    </li>
                                </ul>



                            </li>
                            <li class="clickable">
                                <a href="#">Phương tiện 4</a>
                                <ul style="list-style:none" class="sf-menu-sub">
                                    <li>
                                        <a href="#">Giảng viên 1</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 2</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 3</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 4</a>
                                    </li>
                                </ul>



                            </li>
                            <li class="clickable">
                                <a href="#">Phương tiện 5</a>
                                <ul style="list-style:none" class="sf-menu-sub">
                                    <li>
                                        <a href="#">Giảng viên 1</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 2</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 3</a>
                                    </li>
                                    <li>
                                        <a href="#">Giảng viên 4</a>
                                    </li>
                                </ul>


                            </li>
                        </ul>
                    </div>

                    @*<fieldset class="fs_body">
                            <legend class="head_title">Xếp giảng viên vào khóa học</legend>
                            <div class="w3-row w3-border">
                                <div class="w3-col" style="width:45%">

                                    <div class="subject-info-box-1" style="padding:5px">
                                        <br />
                                        <br />
                                        <input type="text" class="form-control" placeholder="Tìm họ tên hoặc số CMND" />
                                        <br />
                                        <select multiple="multiple" id='lstBox1' class="form-control" style="width:100%; max-width:none; height:50%" >
                                            <option value="ajax">Ajax</option>
                                            <option value="jquery">jQuery</option>
                                            <option value="javascript">JavaScript</option>
                                            <option value="mootool">MooTools</option>
                                            <option value="prototype">Prototype</option>
                                            <option value="dojo">Dojo</option>
                                        </select>
                                    </div>

                                </div>
                                <div class="w3-col" style="width:10%">
                                    <div class="subject-info-arrows text-center" style="vertical-align:middle">
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                        <br />

                                        <br />


                                        <input type="button" id="btnAllRight" value=">>" class="btn btn-default" /><br />
                                        <input type="button" id="btnRight" value=">" class="btn btn-default" /><br />
                                        <input type="button" id="btnLeft" value="<" class="btn btn-default" /><br />
                                        <input type="button" id="btnAllLeft" value="<<" class="btn btn-default" />
                                    </div>
                                </div>
                                <div class="w3-col" style="width:45%">
                                    <div class="subject-info-box-2" style="padding:5px">
                                        <br />
                                        <br />
                                        <input type="text" class="form-control"  placeholder="Tìm họ tên hoặc số CMND"/>
                                        <br />
                                        <select multiple="multiple" id='lstBox2' class="form-control" style="width:100%; max-width:none; height:50%">
                                            <option value="asp">ASP.NET</option>
                                            <option value="c#">C#</option>
                                            <option value="vb">VB.NET</option>
                                            <option value="java">Java</option>
                                            <option value="php">PHP</option>
                                            <option value="python">Python</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            @*<div class="w3-row w3-border">
                                <div class="w3-container w3-half w3-red">
                                    <h2>w3-half</h2>
                                    <p>The w3-half class uses 50% of the parent container.</p>
                                    <p>On screens smaller than 601 pixels it resizes to 100%.</p>
                                </div>
                                <div class="w3-container w3-half">
                                    <h2>w3-half</h2>
                                </div>
                            </div>
                        </fieldset>*@

                </div>
            </div>

            <div id="menu1" class="tab-pane fade">
                <h3>Phương tiện khóa học</h3>

                <div id="tabs-2">

                    <fieldset class="fs_body">
                        <legend class="head_title">Xếp phương tiện vào khóa học</legend>

                        <div class="w3-row w3-border">
                            <div class="w3-col" style="width:45%">

                                <div class="subject-info-box-1" style="padding:5px">
                                    <br />
                                    <br />
                                    <input type="text" class="form-control" placeholder="Tìm họ tên hoặc số CMND" />
                                    <br />
                                    <select multiple="multiple" id='lstBox1' class="form-control" style="width:100%; max-width:none; height:50%">
                                        <option value="ajax">Ajax</option>
                                        <option value="jquery">jQuery</option>
                                        <option value="javascript">JavaScript</option>
                                        <option value="mootool">MooTools</option>
                                        <option value="prototype">Prototype</option>
                                        <option value="dojo">Dojo</option>
                                    </select>
                                </div>

                            </div>
                            <div class="w3-col" style="width:10%">
                                <div class="subject-info-arrows text-center" style="vertical-align:middle">
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />

                                    <br />


                                    <input type="button" id="btnAllRight" value=">>" class="btn btn-default" /><br />
                                    <input type="button" id="btnRight" value=">" class="btn btn-default" /><br />
                                    <input type="button" id="btnLeft" value="<" class="btn btn-default" /><br />
                                    <input type="button" id="btnAllLeft" value="<<" class="btn btn-default" />
                                </div>
                            </div>
                            <div class="w3-col" style="width:45%">
                                <div class="subject-info-box-2" style="padding:5px">
                                    <br />
                                    <br />
                                    <input type="text" class="form-control" placeholder="Tìm họ tên hoặc số CMND" />
                                    <br />
                                    <select multiple="multiple" id='lstBox2' class="form-control" style="width:100%; max-width:none; height:50%">
                                        <option value="asp">ASP.NET</option>
                                        <option value="c#">C#</option>
                                        <option value="vb">VB.NET</option>
                                        <option value="java">Java</option>
                                        <option value="php">PHP</option>
                                        <option value="python">Python</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </fieldset>


                </div>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>Phương tiện giảng viên</h3>

                <div id="tabs-2">

                    <fieldset class="fs_body">
                        <legend class="head_title">Xếp giảng viên vào phương tiện</legend>

                        <div class="w3-row w3-border">
                            <div class="w3-col" style="width:45%">

                                <div class="subject-info-box-1" style="padding:5px">
                                    <br />
                                    <br />
                                    <input type="text" class="form-control" placeholder="Tìm họ tên hoặc số CMND" />
                                    <br />
                                    <select multiple="multiple" id='lstBox1' class="form-control" style="width:100%; max-width:none; height:50%">
                                        <option value="ajax">Ajax</option>
                                        <option value="jquery">jQuery</option>
                                        <option value="javascript">JavaScript</option>
                                        <option value="mootool">MooTools</option>
                                        <option value="prototype">Prototype</option>
                                        <option value="dojo">Dojo</option>
                                    </select>
                                </div>

                            </div>
                            <div class="w3-col" style="width:10%">
                                <div class="subject-info-arrows text-center" style="vertical-align:middle">
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />

                                    <br />


                                    <input type="button" id="btnAllRight" value=">>" class="btn btn-default" /><br />
                                    <input type="button" id="btnRight" value=">" class="btn btn-default" /><br />
                                    <input type="button" id="btnLeft" value="<" class="btn btn-default" /><br />
                                    <input type="button" id="btnAllLeft" value="<<" class="btn btn-default" />
                                </div>
                            </div>
                            <div class="w3-col" style="width:45%">
                                <div class="subject-info-box-2" style="padding:5px">
                                    <br />
                                    <br />
                                    <input type="text" class="form-control" placeholder="Tìm họ tên hoặc số CMND" />
                                    <br />
                                    <select multiple="multiple" id='lstBox2' class="form-control" style="width:100%; max-width:none; height:50%">
                                        <option value="asp">ASP.NET</option>
                                        <option value="c#">C#</option>
                                        <option value="vb">VB.NET</option>
                                        <option value="java">Java</option>
                                        <option value="php">PHP</option>
                                        <option value="python">Python</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </fieldset>


                </div>
            </div>
            <div id="menu3" class="tab-pane fade">
                <h3>Phương tiện học viên</h3>

                <div id="tabs-2">

                    <fieldset class="fs_body">
                        <legend class="head_title">Xếp học vào phương tiện</legend>
                        <div class="w3-row w3-border">
                            <div class="w3-col" style="width:45%">

                                <div class="subject-info-box-1" style="padding:5px">
                                    <br />
                                    <br />
                                    <input type="text" class="form-control" placeholder="Tìm họ tên hoặc số CMND" />
                                    <br />
                                    <select multiple="multiple" id='lstBox1' class="form-control" style="width:100%; max-width:none; height:50%">
                                        <option value="ajax">Ajax</option>
                                        <option value="jquery">jQuery</option>
                                        <option value="javascript">JavaScript</option>
                                        <option value="mootool">MooTools</option>
                                        <option value="prototype">Prototype</option>
                                        <option value="dojo">Dojo</option>
                                    </select>
                                </div>

                            </div>
                            <div class="w3-col" style="width:10%">
                                <div class="subject-info-arrows text-center" style="vertical-align:middle">
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />

                                    <br />


                                    <input type="button" id="btnAllRight" value=">>" class="btn btn-default" /><br />
                                    <input type="button" id="btnRight" value=">" class="btn btn-default" /><br />
                                    <input type="button" id="btnLeft" value="<" class="btn btn-default" /><br />
                                    <input type="button" id="btnAllLeft" value="<<" class="btn btn-default" />
                                </div>
                            </div>
                            <div class="w3-col" style="width:45%">
                                <div class="subject-info-box-2" style="padding:5px">
                                    <br />
                                    <br />
                                    <input type="text" class="form-control" placeholder="Tìm họ tên hoặc số CMND" />
                                    <br />
                                    <select multiple="multiple" id='lstBox2' class="form-control" style="width:100%; max-width:none; height:50%">
                                        <option value="asp">ASP.NET</option>
                                        <option value="c#">C#</option>
                                        <option value="vb">VB.NET</option>
                                        <option value="java">Java</option>
                                        <option value="php">PHP</option>
                                        <option value="python">Python</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </fieldset>

                    <br />



                </div>
            </div>
        </div>
    </div>


    <br />

    <div class="row">
        <div class="col-md-12">
            @*<input type="submit" value="Cập nhật" class="btn btn-info btn-sm" />*@
            <button type="submit" class="btn btn-danger btn-sm">
                <span class="glyphicon glyphicon-floppy-disk"></span> Cập nhật
            </button>
            &nbsp;&nbsp;
            @Html.ActionLink("Quay lại", "Index", null, new { @class = "btn btn-primary btn-sm" })
        </div>

    </div>
}